# 报价详情页 - TAPD需求文档

需求背景（补充业务场景与触发原因）：

客户在查看需求详情或收到报价通知后，需要能够查看报价的详细信息。目前客户无法查看报价的完整信息，包括报价明细、报价金额、有效期、备注说明等关键信息，导致客户需要联系顾问询问报价详情、报价有效期、报价包含的服务内容等，沟通成本高。需要一个报价详情页面，让客户能够全面了解报价的完整信息，包括基本信息、报价明细、合计金额、备注说明等，支持确认或拒绝报价操作，提升客户自主查看报价信息的效率，减少不必要的沟通成本。

需求价值（补充对业务的价值）：

1. **提升客户自主查询能力**：通过报价详情页面，客户可以自主查看报价的完整信息，包括报价明细、报价金额、有效期等，减少对顾问的依赖，降低沟通成本。
2. **提升客户体验**：客户可以全面了解报价的详细信息，包括每个服务项目的数量、单价、小计等，提升客户对报价的信任度和满意度。
3. **支持报价决策**：通过详细的报价明细和备注说明，客户可以充分了解报价内容，支持客户做出确认或拒绝报价的决策。
4. **建立透明的报价机制**：通过报价明细展示，让客户清晰了解报价的构成，包括每个服务项目的价格，建立透明的报价机制。
5. **支持报价操作**：通过确认和拒绝报价功能，客户可以直接在页面上完成报价的确认或拒绝操作，提升操作效率。
6. **支持业务数据分析**：通过报价详情数据，可以分析报价确认率、拒绝原因、报价有效期等，支持业务决策。

需求目标（说明该需求要解决的问题或达成的目标）：

1. **提供报价详情展示**：作为客户查看单个报价详细信息的主要页面，全面展示报价的所有相关信息。
2. **展示报价基本信息**：展示报价单号、关联需求、报价时间、有效期、报价状态等基本信息，让客户快速了解报价概况。
3. **展示报价明细**：以列表形式展示报价明细，包括每个服务项目的序号、名称、数量、单价、小计等，让客户清晰了解报价构成。
4. **展示合计金额**：展示报价的合计金额，突出显示，让客户快速了解报价总额。
5. **展示备注说明**：展示报价的备注说明信息，包括服务内容、完成时间、注意事项等，帮助客户全面了解报价。
6. **支持报价操作**：提供确认报价和拒绝报价功能，支持客户在页面上完成报价的确认或拒绝操作。
7. **支持页面导航**：提供返回按钮，支持客户返回上一页面。

用户故事（不同的视角下，希望的结果）：

**作为客户，我希望：**
- 能够查看报价的完整信息，包括报价单号、关联需求、报价时间、有效期、报价状态等基本信息。
- 能够查看报价明细，了解每个服务项目的名称、数量、单价、小计，清晰了解报价构成。
- 能够查看报价的合计金额，快速了解报价总额。
- 能够查看报价的备注说明，了解服务内容、完成时间、注意事项等。
- 能够复制报价单号，方便后续沟通和查询。
- 能够确认报价，完成报价的确认操作。
- 能够拒绝报价，在确认后完成报价的拒绝操作。
- 能够通过返回按钮返回上一页面。

**作为顾问，我希望：**
- 客户能够自主查看报价详情，减少"报价包含什么服务"、"报价有效期到什么时候"这类基础咨询，让我有更多时间处理核心业务。
- 客户能够通过报价明细了解报价构成，减少因信息不对称导致的沟通成本。
- 客户能够直接在页面上确认或拒绝报价，减少沟通环节，提升服务效率。

**作为产品经理，我希望：**
- 报价详情页面能够提升客户自主查询能力，降低对顾问的依赖，提升整体服务效率。
- 通过报价明细展示，建立透明的报价机制，提升客户对报价的信任度。
- 通过确认和拒绝报价功能，支持客户快速完成报价操作，提升操作效率。
- 报价详情页面作为报价管理的核心页面，能够引导客户查看需求、查看协议等后续操作。

需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

**1. 页面布局结构**
- 包含以下主要区域（从上到下）：
  - 顶部导航栏（固定顶部，包含返回按钮、标题）
  - 报价基本信息区域（白色卡片，包含报价单号、关联需求、报价时间、有效期、报价状态）
  - 报价明细区域（白色卡片，包含服务项目列表和合计金额）
  - 备注说明区域（白色卡片，包含备注说明文本）
  - 底部操作按钮区域（固定底部，包含拒绝报价和确认报价按钮）

**2. 导航栏**
- 左侧显示返回按钮（箭头图标），点击后返回上一页面（通常是需求详情页或需求列表页）
- 中间显示标题"报价详情"
- 导航栏固定在顶部，滚动时保持可见

**3. 报价基本信息展示**
- **报价单号**：显示报价单号（如"QT20240116001"），右侧显示复制图标，点击后复制报价单号到剪贴板，并提示"已复制"
- **关联需求**：显示关联的需求标题，使用主色调（蓝紫色）文字，点击后跳转到需求详情页（可选功能）
- **报价时间**：显示报价创建时间，格式：YYYY-MM-DD HH:mm
- **有效期至**：显示报价有效期截止时间，使用主色调文字，加粗显示，格式：YYYY-MM-DD HH:mm
- **报价状态**：显示报价当前状态（如"待确认"），使用不同颜色的标签表示
  - 待确认：浅蓝色背景，主色调文字
  - 已确认：绿色背景，绿色文字
  - 已拒绝：红色背景，红色文字
  - 已过期：灰色背景，灰色文字

**4. 报价明细展示**
- **标题**：显示"报价明细"
- **明细列表布局**：垂直排列，每个服务项目一个列表项
- **列表项结构**：
  - 左侧：序号标签（圆形背景，主色调，显示序号1、2、3等）和服务项目名称（加粗显示）
  - 右侧：数量、单价、小计信息，横向排列
    - 数量：显示"数量 X"（X为数量值）
    - 单价：显示"单价 ¥X"（X为单价，带千分位分隔符）
    - 小计：显示"小计 ¥X"（X为小计金额，带千分位分隔符，主色调，加粗）
- **合计金额**：显示在明细列表下方，使用分隔线与明细列表分开
  - 左侧显示"合计"文字
  - 右侧显示合计金额，字体较大（2xl），加粗，主色调，带千分位分隔符
- **数据来源**：从后端获取报价明细数据，包括每个服务项目的名称、数量、单价、小计等

**5. 备注说明展示**
- **标题**：显示"备注说明"
- **内容**：显示报价的备注说明文本，支持多行显示，行间距适中
- **数据来源**：从后端获取报价的备注说明数据

**6. 底部操作按钮**
- **布局**：固定在页面底部，横向排列两个按钮
- **拒绝报价按钮**：
  - 左侧按钮，灰色背景，灰色文字
  - 点击后显示拒绝确认弹窗
- **确认报价按钮**：
  - 右侧按钮，主色调背景，白色文字
  - 点击后直接提交确认报价请求

**7. 拒绝报价确认弹窗**
- **触发条件**：点击拒绝报价按钮后显示
- **弹窗结构**：
  - 遮罩层：半透明黑色背景，覆盖整个页面
  - 弹窗内容：白色背景，圆角，居中显示
    - 标题：显示"确认拒绝报价？"，加粗显示
    - 提示文字：显示"拒绝后本次报价将失效，确定继续？"
    - 操作按钮：横向排列两个按钮
      - 取消按钮：灰色背景，灰色文字，点击后关闭弹窗
      - 确认拒绝按钮：主色调背景，白色文字，点击后提交拒绝报价请求
- **交互逻辑**：
  - 点击遮罩层或取消按钮，关闭弹窗
  - 点击确认拒绝按钮，提交拒绝报价请求，请求成功后关闭弹窗并提示"您已拒绝该报价"，然后返回上一页面或刷新当前页面状态

**8. 数据获取规则**
- **接口调用**：
  - 页面加载时，调用后端接口获取报价详情数据
  - 接口需要传递报价ID参数（从URL参数或路由参数获取）
  - 接口需要传递当前登录用户的ID或token（用于权限验证）
  - 接口返回报价详情数据，包括：
    - 基本信息：报价ID、报价单号、关联需求ID、关联需求标题、报价时间、有效期、报价状态等
    - 报价明细：服务项目列表，每个项目包括名称、数量、单价、小计等
    - 备注说明：备注说明文本
- **数据更新**：
  - 页面支持下拉刷新（可选），刷新时重新获取最新数据
  - 或提供刷新按钮，点击后重新加载数据
  - 报价状态可能会实时更新，需要支持实时刷新或定时刷新

**9. 报价操作规则**
- **确认报价操作**：
  - 点击确认报价按钮后，调用后端接口提交确认报价请求
  - 接口需要传递报价ID和用户身份信息
  - 请求成功后，更新报价状态为"已确认"，并提示"您已确认该报价"
  - 请求失败时，显示错误提示，支持重试
  - 确认后，可以跳转到需求详情页
- **拒绝报价操作**：
  - 点击拒绝报价按钮后，显示拒绝确认弹窗
  - 在弹窗中点击确认拒绝按钮后，调用后端接口提交拒绝报价请求
  - 接口需要传递报价ID和用户身份信息
  - 请求成功后，更新报价状态为"已拒绝"，关闭弹窗并提示"您已拒绝该报价"
  - 请求失败时，显示错误提示，支持重试
  - 拒绝后，可以返回上一页面或刷新当前页面状态
- **操作限制**：
  - 只有状态为"待确认"的报价才能进行确认或拒绝操作
  - 已确认、已拒绝、已过期的报价不显示操作按钮，或显示不可点击状态
  - 报价过期后，自动禁用确认和拒绝操作

**10. 页面跳转规则**
- **返回按钮**：点击导航栏左侧返回按钮，返回上一页面（通常是需求详情页或需求列表页）
- **关联需求跳转**：点击关联需求标题，跳转到需求详情页，传递需求ID参数
- **确认报价后跳转**：确认报价后，可以跳转到需求详情页

**11. 空状态处理**
- **报价不存在时**：显示"报价不存在"错误提示，支持返回上一页面
- **报价明细为空时**：显示"暂无报价明细"提示（正常情况下不应出现）
- **备注说明为空时**：不显示备注说明区域，或显示"暂无备注说明"提示

**12. 加载状态处理**
- 数据加载时，显示加载动画或骨架屏
- 加载失败时，显示错误提示和重试按钮
- 提交确认或拒绝请求时，显示加载状态，防止重复提交

**13. 异常处理**
- 网络请求失败时，显示友好的错误提示，支持重试
- 数据格式错误时，显示错误提示，不影响页面基本显示
- 报价不存在或无权访问时，显示错误提示，支持返回上一页面
- 报价已过期时，显示过期提示，禁用操作按钮
- 报价已被确认或拒绝时，显示相应提示，禁用操作按钮
- 操作失败时，显示错误提示，支持重试

**14. 复制功能**
- **复制报价单号**：
  - 点击报价单号右侧的复制图标，复制报价单号到剪贴板
  - 复制成功后，显示提示"已复制"（可以使用Toast提示）
  - 复制失败时，显示错误提示

验收标准（列出明确、可验证的交付标准）：

**1. 页面布局验收**
- [ ] 导航栏固定在顶部，包含返回按钮和标题
- [ ] 报价基本信息区域正确显示，包含报价单号、关联需求、报价时间、有效期、报价状态
- [ ] 报价明细区域正确显示，包含服务项目列表和合计金额
- [ ] 备注说明区域正确显示，包含备注说明文本
- [ ] 底部操作按钮固定在底部，两个按钮正确显示

**2. 报价基本信息展示验收**
- [ ] 报价单号正确显示，复制图标正确显示
- [ ] 点击复制图标后，报价单号正确复制到剪贴板，并显示提示
- [ ] 关联需求正确显示，点击后正确跳转到需求详情页（如果实现该功能）
- [ ] 报价时间正确显示，格式为YYYY-MM-DD HH:mm
- [ ] 有效期正确显示，格式为YYYY-MM-DD HH:mm，主色调，加粗
- [ ] 报价状态标签正确显示，颜色与状态对应

**3. 报价明细展示验收**
- [ ] 报价明细列表正确显示，包含所有服务项目
- [ ] 每个服务项目的序号、名称、数量、单价、小计正确显示
- [ ] 数量、单价、小计格式正确，带千分位分隔符
- [ ] 小计金额正确计算（数量 × 单价）
- [ ] 合计金额正确显示，字体较大，加粗，主色调，带千分位分隔符
- [ ] 合计金额等于所有小计金额之和

**4. 备注说明展示验收**
- [ ] 备注说明标题正确显示
- [ ] 备注说明内容正确显示，支持多行显示
- [ ] 备注说明为空时，正确显示空状态提示或不显示该区域

**5. 底部操作按钮验收**
- [ ] 拒绝报价按钮正确显示，灰色背景，灰色文字
- [ ] 确认报价按钮正确显示，主色调背景，白色文字
- [ ] 按钮固定在页面底部，滚动时保持可见
- [ ] 报价状态为"待确认"时，两个按钮都可以点击
- [ ] 报价状态为"已确认"、"已拒绝"、"已过期"时，按钮不可点击或隐藏

**6. 拒绝报价确认弹窗验收**
- [ ] 点击拒绝报价按钮后，弹窗正确显示
- [ ] 弹窗遮罩层正确显示，半透明黑色背景
- [ ] 弹窗内容正确显示，包含标题、提示文字、操作按钮
- [ ] 点击遮罩层或取消按钮后，弹窗正确关闭
- [ ] 点击确认拒绝按钮后，正确提交拒绝报价请求
- [ ] 请求成功后，弹窗正确关闭，并显示提示信息

**7. 报价操作验收**
- [ ] 点击确认报价按钮后，正确提交确认报价请求
- [ ] 请求成功后，报价状态正确更新为"已确认"，并显示提示信息
- [ ] 点击拒绝报价按钮后，正确显示确认弹窗
- [ ] 在弹窗中点击确认拒绝按钮后，正确提交拒绝报价请求
- [ ] 请求成功后，报价状态正确更新为"已拒绝"，并显示提示信息
- [ ] 操作失败时，正确显示错误提示，支持重试
- [ ] 操作时，正确显示加载状态，防止重复提交

**8. 交互功能验收**
- [ ] 点击导航栏返回按钮后，正确返回上一页面
- [ ] 点击关联需求标题后，正确跳转到需求详情页（如果实现该功能）
- [ ] 点击复制图标后，报价单号正确复制到剪贴板
- [ ] 所有可点击元素都有点击反馈效果

**9. 数据获取验收**
- [ ] 页面加载时，正确调用后端接口获取报价详情数据
- [ ] 接口正确传递报价ID参数和用户身份信息
- [ ] 返回的数据正确解析和展示
- [ ] 数据加载时，正确显示加载状态
- [ ] 数据加载失败时，正确显示错误提示和重试按钮

**10. 空状态处理验收**
- [ ] 报价不存在时，正确显示"报价不存在"错误提示，支持返回上一页面
- [ ] 报价明细为空时，正确显示"暂无报价明细"提示
- [ ] 备注说明为空时，正确显示空状态提示或不显示该区域

**11. 异常处理验收**
- [ ] 网络请求失败时，正确显示错误提示，支持重试
- [ ] 数据格式错误时，正确显示错误提示
- [ ] 报价不存在或无权访问时，正确显示错误提示，支持返回上一页面
- [ ] 报价已过期时，正确显示过期提示，禁用操作按钮
- [ ] 报价已被确认或拒绝时，正确显示相应提示，禁用操作按钮
- [ ] 操作失败时，正确显示错误提示，支持重试

**12. 性能要求验收**
- [ ] 页面加载时间不超过2秒
- [ ] 页面滚动流畅，无卡顿现象
- [ ] 数据刷新响应及时，无明显延迟
- [ ] 操作响应及时，无明显延迟

**13. 数据准确性验收**
- [ ] 报价详情数据与数据库一致
- [ ] 报价明细数据与后端定义一致
- [ ] 合计金额计算正确，等于所有小计金额之和
- [ ] 报价状态与后端定义一致
- [ ] 时间信息正确显示，时区处理正确
- [ ] 金额格式正确，带千分位分隔符

**14. 业务规则验收**
- [ ] 只有状态为"待确认"的报价才能进行确认或拒绝操作
- [ ] 已确认、已拒绝、已过期的报价不能进行操作
- [ ] 报价过期后，自动禁用确认和拒绝操作
- [ ] 确认报价后，报价状态正确更新
- [ ] 拒绝报价后，报价状态正确更新